<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script type="text/javascript" src="/static/js/echarts.js"></script>
    <script type="text/javascript" src="/static/js/echartsTheme.js"></script>
    <link rel="stylesheet" href="/static/login/app.4450b33b8eb76bf7937224d184272a92.css" />
    <title>数据概览</title>
</head>
<style type="text/css">
    .circle {
        line-height: 36px;
        border: 1px solid gainsboro;
        text-align: center;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        float: left;
        margin-right: calc((100% - 600px) / 5);
        font-size: 2px;
        cursor: pointer;
    }

    #main {
        border: 1px solid gainsboro;
        margin-top: 40px;
    }

    .box-m {
        border: 1px solid gainsboro;
        margin-left: 100px;
        width: 400px;
        height: 200px;
        border-radius: 10px;
    }

    .label-head {
        padding: 50px;
        font-family: "Courier New", Courier, monospace;
    }

    .distance {
        padding: 12px;
        cursor: pointer;
    }

    .square {
        padding: 4px;
        margin-right: 6px;
        background: #2b94e8;
    }

    .avatar-circle {
        border-radius: 50%;
    }

    .distance span:nth-child(2) {
        padding-left: 10px;
    }

    .distance span:nth-child(3) {
        padding-left: 10px;
    }

    .distance span:last-child {
        padding-left: 30px;
    }

    .font-weight-sm {
        font-size: 20px;
        margin-top: 16px;
        font-weight: bold;
    }
</style>
<body> 
<div class="main-container">
	<section data-v-0ef526f4="" class="app-main">
			<div data-v-6a129c90="" class="app-container">
				<div data-v-6a129c90="" class="un-handle-layout">
					<div data-v-6a129c90="" class="layout-title">待处理事务</div>
					<div data-v-6a129c90="" class="un-handle-content">
						<div data-v-6a129c90="" class="el-row"
							style="margin-left: -10px; margin-right: -10px;">
							<div data-v-6a129c90="" class="el-col el-col-8"
								style="padding-left: 10px; padding-right: 10px;" onclick="onHandCircle('1','5')">
								<div data-v-6a129c90="" class="un-handle-item">
									<span data-v-6a129c90="" class="font-medium">待审核教师账号</span> <span
										data-v-6a129c90="" class="color-danger" style="float: right;">[[${default.teacherCheckAmount}]]</span>
								</div>
							</div>
							<div data-v-6a129c90="" class="el-col el-col-8"
								style="padding-left: 10px; padding-right: 10px;" onclick="onHandCircle('1','8')">
								<div data-v-6a129c90="" class="un-handle-item">
									<span data-v-6a129c90="" class="font-medium">用户被举报账号</span> <span
										data-v-6a129c90="" class="color-danger" style="float: right;">[[${default.accountReportAmount}]]</span>
								</div>
							</div>
							<div data-v-6a129c90="" class="el-col el-col-8"
								style="padding-left: 10px; padding-right: 10px;" onclick="onHandCircle('7','1')">
								<div data-v-6a129c90="" class="un-handle-item">
									<span data-v-6a129c90="" class="font-medium">待审核申述账号</span> <span
										data-v-6a129c90="" class="color-danger" style="float: right;">[[${default.accountSataeAmount}]]</span>
								</div>
							</div>
						</div>
						
						<div data-v-6a129c90="" class="el-row"
							style="margin-left: -10px; margin-right: -10px;">
							<div data-v-6a129c90="" class="el-col el-col-8"
								style="padding-left: 10px; padding-right: 10px;" onclick="onHandCircle('6','1')">
								<div data-v-6a129c90="" class="un-handle-item">
									<span data-v-6a129c90="" class="font-medium">待处理知识点异议</span><span
										data-v-6a129c90="" class="color-danger" style="float: right;">[[${default.objectionableKnowledgeAmount}]]</span>
								</div>
							</div>
							<div data-v-6a129c90="" class="el-col el-col-8"
								style="padding-left: 10px; padding-right: 10px;">
								<div data-v-6a129c90="" class="un-handle-item" onclick="onHandCircle('1','7')">
									<span data-v-6a129c90="" class="font-medium">待处理的新试题</span> <span
										data-v-6a129c90="" class="color-danger" style="float: right;">[[${default.pendingTopicAmount}]]</span>
								</div>
							</div>
							<div data-v-6a129c90="" class="el-col el-col-8"
								style="padding-left: 10px; padding-right: 10px;"  onclick="onHandCircle('6','2')">
								<div data-v-6a129c90="" class="un-handle-item">
									<span data-v-6a129c90="" class="font-medium">待处理试题异议</span> <span
										data-v-6a129c90="" class="color-danger" style="float: right;">[[${default.objectionableTopicAmount}]]</span>
								</div>
							</div>
							<div data-v-6a129c90="" class="el-col el-col-8 layui-hide"
								style="padding-left: 10px; padding-right: 10px;">
								<div data-v-6a129c90="" class="un-handle-item">
									<span data-v-6a129c90="" class="font-medium"></span> <span
										data-v-6a129c90="" class="color-danger" style="float: right;"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div data-v-6a129c90="" class="overview-layout">
					<div data-v-6a129c90="" class="el-row"
						style="margin-left: -10px; margin-right: -10px;">
						<div data-v-6a129c90="" class="el-col el-col-12"
							style="padding-left: 10px; padding-right: 10px;">
							<div data-v-6a129c90="" class="out-border">
								<div data-v-6a129c90="" class="layout-title">教师数据总览</div>
								<div data-v-6a129c90="" style="padding: 40px;">
									<div data-v-6a129c90="" class="el-row">
										<div data-v-6a129c90=""
											class="color-danger overview-item-value el-col el-col-6">[[${selectDefaultNumber.thisDayTeacher}]]</div>
										<div data-v-6a129c90=""
											class="color-danger overview-item-value el-col el-col-6">[[${selectDefaultNumber.thisMonthTeacher}]]</div>
										<div data-v-6a129c90=""
											class="color-danger overview-item-value el-col el-col-6">[[${selectDefaultNumber.thisYearTeacher}]]</div>
										<div data-v-6a129c90=""
											class="color-danger overview-item-value el-col el-col-6">[[${default.teacherAllAmount}]]</div>
									</div>
									<div data-v-6a129c90="" class="font-medium el-row">
										<div data-v-6a129c90=""
											class="overview-item-title el-col el-col-6">今日新增</div>
										<div data-v-6a129c90=""
											class="overview-item-title el-col el-col-6">本月新增</div>
										<div data-v-6a129c90=""
											class="overview-item-title el-col el-col-6">本年新增</div>
										<div data-v-6a129c90=""
											class="overview-item-title el-col el-col-6">全部用户</div>
									</div>
								</div>
							</div>
						</div>
						<div data-v-6a129c90="" class="el-col el-col-12"
							style="padding-left: 10px; padding-right: 10px;">
							<div data-v-6a129c90="" class="out-border">
								<div data-v-6a129c90="" class="layout-title">学生数据总览</div>
								<div data-v-6a129c90="" style="padding: 40px;">
									<div data-v-6a129c90="" class="el-row">
										<div data-v-6a129c90=""
											class="color-danger overview-item-value el-col el-col-6">[[${selectDefaultNumber.thisDayStudent}]]</div>
										<div data-v-6a129c90=""
											class="color-danger overview-item-value el-col el-col-6">[[${selectDefaultNumber.thisMonthStudent}]]</div>
										<div data-v-6a129c90=""
											class="color-danger overview-item-value el-col el-col-6">[[${selectDefaultNumber.thisYearStudent}]]</div>
										<div data-v-6a129c90=""
											class="color-danger overview-item-value el-col el-col-6">[[${default.studentAllAmount}]]</div>
									</div>
									<div data-v-6a129c90="" class="font-medium el-row">
										<div data-v-6a129c90=""
											class="overview-item-title el-col el-col-6">今日新增</div>
										<div data-v-6a129c90=""
											class="overview-item-title el-col el-col-6">本月新增</div>
										<div data-v-6a129c90=""
											class="overview-item-title el-col el-col-6">本年新增</div>
										<div data-v-6a129c90=""
											class="overview-item-title el-col el-col-6">全部用户</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div data-v-6a129c90="" class="statistics-layout">
					<div data-v-6a129c90="" class="layout-title">账号信息统计</div>
					<div data-v-6a129c90="" class="el-row">
						<div data-v-6a129c90="" class="el-col el-col-4">
							<div data-v-6a129c90="" style="padding: 20px;">
								<!--<div data-v-6a129c90="">
									<div data-v-6a129c90=""
										style="color: rgb(144, 147, 153); font-size: 14px;">本月浏览人数</div>
									<div data-v-6a129c90=""
										style="color: rgb(96, 98, 102); font-size: 24px; padding: 10px 0px;">[[${default.monthBrowseAmount}]]</div>
									
									
								</div> -->
								<div data-v-6a129c90="" style="margin-top: 20px;">
									<div data-v-6a129c90=""
										style="color: rgb(144, 147, 153); font-size: 14px;">本月新增人数</div>
									<div data-v-6a129c90=""
										style="color: rgb(96, 98, 102); font-size: 24px; padding: 10px 0px;">[[${selectDefaultNumber.thisMonthAll}]]</div>
									
									
									
								</div>
								<!-- <div data-v-6a129c90="" style="margin-top: 20px;">
									<div data-v-6a129c90=""
										style="color: rgb(144, 147, 153); font-size: 14px;">本年浏览人数</div>
									<div data-v-6a129c90=""
										style="color: rgb(96, 98, 102); font-size: 24px; padding: 10px 0px;">[[${default.yearBrowseAmount}]]</div>
									
								</div> -->
								<div data-v-6a129c90="" style="margin-top: 20px;">
									<div data-v-6a129c90=""
										style="color: rgb(144, 147, 153); font-size: 14px;">本年新增人数</div>
									<div data-v-6a129c90=""
										style="color: rgb(96, 98, 102); font-size: 24px; padding: 10px 0px;">[[${selectDefaultNumber.thisYearAll}]]</div>
									
											
								</div>
							</div>
						</div>
						<div data-v-6a129c90="" class="el-col el-col-20">
							<div data-v-6a129c90=""
								style="padding: 10px; border-left: 1px solid rgb(220, 223, 230);">
								<div data-v-6a129c90=""
									class="el-date-editor el-range-editor el-input__inner el-date-editor--daterange el-range-editor--small layui-hide"
									style="float: right; z-index: 1;">
									<i class="el-input__icon el-range__icon el-icon-date"></i><input
										placeholder="开始日期" name="" class="el-range-input" id="el-icon-date" autocomplete="off"><span
										class="el-range-separator">至</span><input placeholder="结束日期"
										name="" class="el-range-input" id="el-icon-date2" autocomplete="off"><i
										class="el-input__icon el-range__close-icon"></i>
								</div>
								<div data-v-6a129c90="">
									<div data-v-6a129c90="" class="ve-line"
										style="width: auto; height: 400px; position: relative;">
											<div id="consoleChartsMonth" style="width: 100%;height:400px;"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
</div>


<!-- 引入 -->
<script type="text/javascript">window.jQuery || document.write("<script src='/static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
<script src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/ace-elements.min.js"></script>
<script type="text/javascript" src="/static/js/ace.min.js"></script>
<script type="text/javascript" src="/static/js/chosen.jquery.min.js"></script><!-- 下拉框 -->
<script type="text/javascript" src="/static/js/bootstrap-datepicker.min.js"></script><!-- 日期框 -->

<script type="text/javascript" src="/layui/layui.js"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    let selectDefaultNumber = /*[[${selectDefaultNumber}]]*/
    /*]]>*/
</script>
<script>
   $(top.hangge());
   layui.use(['layer'], function () {
       var $ = layui.jquery;
       var layer = layui.layer;
	   var myCharts3 = echarts.init(document.getElementById('consoleChartsMonth'));
	   var options3 = {
	       tooltip: {
	           trigger: 'axis',
	           axisPointer: {lineStyle: {color: '#E0E0E0'}},
	       },
	       color: ['#10B4E8', '#FFA800'],
	       legend: {
	           orient: 'vertical', right: '0px', top: '0px',
	           data: ['教师', '学生'], textStyle: {color: '#595959'}
	       },
	       grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
	       xAxis: {
	           name: '年-月',
	           nameTextStyle: {color: '#595959'},
	           type: 'category',
	           data: selectDefaultNumber.dateMessage,
	           axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
	           axisLabel: {
	               color: '#8c8c8c', interval: function (index, value) {
	            	   return index === 0 || ((index + 1) % 1 === 0);
	               }
	           },
	           axisTick: {alignWithLabel: true}
	       },
	       yAxis: {
	           name: '人数',
	           nameTextStyle: {color: '#595959'},
	           type: 'value',
	           boundaryGap: ['0', '20%'],
	           axisTick: {show: false},
	           axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
	           axisLabel: {color: '#8c8c8c'},
	           splitLine: {show: false},
	           splitArea: {show: false},
	           minInterval: 1
	       },
	       series: [
	           {name: '教师', type: 'line', smooth: false},
	           {name: '学生', type: 'line', smooth: false}
	       ]
	   };
	   myCharts3.setOption(options3);
	   // 赋值
	   myCharts3.setOption({
	       series: [
	           {data: selectDefaultNumber.dateTeacherNumber},
	           {data: selectDefaultNumber.dateStudentNumber}
	       ]
	   });
});
</script>


</body>
</html>